<template>
  <div class="tagnavigation">
    <el-button class="tag-arrow-left" disabled>
      <i class="el-icon-arrow-left" style="color: #93a4c7"></i>
    </el-button>
    <div class="tabs">
      <el-tag
        :key="tag.name"
        size="small"
        v-for="(tag, index) in tags"
        :closable="tag.name !== 'home'"
        :disable-transitions="false"
        @close="handleClose(tag, index)"
        @click="changeMenu(tag)"
        :effect="$route.name === tag.label ? 'dark' : 'plain'"
      >
        {{ tag.label == "首页" ? "主页" : tag.label }}
      </el-tag>
      <el-button class="tag-arrow-right" disabled>
        <i class="el-icon-arrow-right" style="color: #93a4c7"></i>
      </el-button>
    </div>
  </div>
</template>
<script>
  import { mapState, mapMutations  } from 'vuex';
 export default {
    computed: {
            ...mapState({
                tags: state => state.tab.tabsList
            }),
             isCollapse() {
             return this.$store.state.tab.isCollapse
            }
          },
    methods:{
      handleClose(tag, index) {
        let length = this.tags.length - 1
        this.close(tag)
        if (tag.label !== this.$route.name) {
          return
        }
        if (index === length) {
          this.$router.push({ name: this.tags[index - 1].label })
          this.$store.commit('selectMenu', this.tags[index - 1])
        } else {
          this.$router.push({ name: this.tags[index].label })
          this.$store.commit('selectMenu', this.tags[index])
        }
       },
       ...mapMutations({
        close: 'closeTab'
      }),
      changeMenu(item) {
         const currentPath = this.$route.path;
         const targetPath = `${item.path}`;
         if (currentPath !== targetPath) {
                this.$router.push({ name: item.label })
                this.$store.commit('selectMenu', item)
            }
       }
   }
 }
</script>
<style scoped>
@import "../assets/css/index.less";
</style>